<template>
  <div class="box board" id="result">
    <div class="flex">
      <el-button type="primary" @click="handleExcel">导出EXCEL表格</el-button>
      <el-button type="primary" @click="handlePdf">导出PDF结果</el-button>
      <!-- <el-button type="primary" @click="handleWord">导出Word结果</el-button> -->
      <img @click="back" class="back" src="../../../assets/image/back.png" alt="" />
      <div style="display: none" ref="printBtn" v-print="printObj"></div>
    </div>
    <div id="report">
      <MChiSquare v-if="prop.analysisMethod.value == 'Chi-Square' && currentData" :data="currentData">
        <template #analysis>
          <div id="describe" v-if="currentData.analyse">
            <div v-if="currentData.analyse">
              <div class="title">分析建议</div>
              <div v-html="currentData.analyse"></div>
            </div>
          </div>
          <MChiSquareChart v-if="prop.analysisMethod.value == 'Chi-Square' && currentData" :data="currentData" />
        </template>
      </MChiSquare>
      <MVariance v-if="prop.analysisMethod.value == 'variance' && currentData" :data="currentData">
        <template #analysis>
          <div id="describe" v-if="currentData.analyse">
            <div v-if="currentData.analyse">
              <div class="title">分析建议</div>
              <div v-html="currentData.analyse"></div>
            </div>
          </div>
          <MVarianceChart v-if="prop.analysisMethod.value == 'variance' && currentData" :data="currentData" />
        </template>
      </MVariance>
      <MFrequency v-if="prop.analysisMethod.value == 'frequency' && currentData" :data="currentData">
        <template #analysis>
          <div id="describe" v-if="currentData.analyse">
            <div v-if="currentData.analyse">
              <div class="title">分析建议</div>
              <div v-html="currentData.analyse"></div>
            </div>
          </div>
          <MFrequencyChart v-if="prop.analysisMethod.value == 'frequency' && currentData" :data="currentData" />
        </template>
      </MFrequency>
      <MGray v-if="prop.analysisMethod.value == 'gray' && currentData" :data="currentData"></MGray>
      <MNormalityTest
        v-if="prop.analysisMethod.value == 'normalityTest' && currentData"
        :data="currentData"
        :method="prop.analysisMethod"
      ></MNormalityTest>
      <MTTestPaired v-if="prop.analysisMethod.value == 'TTestPaired' && currentData" :data="currentData"></MTTestPaired>
      <MTTestSingle v-if="prop.analysisMethod.value == 'TTestSingle' && currentData" :data="currentData"></MTTestSingle>
      <MTTest v-if="prop.analysisMethod.value == 'TTest' && currentData" :data="currentData"></MTTest>
      <!-- <div id="chart"></div> -->
      <img :src="currentimgUrl" alt="" />
    </div>
  </div>
</template>

<script setup>
import html2canvas from 'html2canvas'
import * as echarts from 'echarts'
import { onMounted } from 'vue-demi'
import MChiSquare from './M-Chi-Square/index.vue'
import MChiSquareChart from './M-Chi-Square/M-Chi-Square-Chart.vue'
import MVariance from './M-Variance/index.vue'
import MVarianceChart from './M-Variance/M-Variance-Chart.vue'
import MFrequency from './M-Frequency/index.vue'
import MFrequencyChart from './M-Frequency/M-Frequency-Chart.vue'
import MGray from './M-Gray/index.vue'
import MNormalityTest from './M-Normality-Test/index.vue'
import MTTestPaired from './M-T-Test-Paired/index.vue'
import MTTestSingle from './M-T-Test-Single/index.vue'
import MTTest from './M-T-Test/index.vue'
import TableColumn from './TableColumn.vue'
import M_Variance from './M-Variance/M-Variance.json'
import M_Chi_Square from './M-Chi-Square/M-Chi-Square.json'
import M_Frequency from './M-Frequency/M-Frequency.json'
import M_Gray from './M-Gray/M-Gray.json'
import { saveAs } from 'file-saver'
const printObj = ref({
  id: 'report',
  popTitle: '',
  scanStyles: false,
  targetStyles: ['*']
})
const printBtn = ref(null)
const emit = defineEmits(['back'])
const prop = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  analysisMethod: {
    type: Object,
    default: () => ({})
  }
})
const currentData = ref('')
const currentimgUrl = ref('')
const back = () => {
  emit('back')
}
onMounted(() => {
  // if (prop.analysisMethod.value == 'gray') {
  //   currentData.value = { ...M_Gray.data, percentage: prop.data.percentage }
  //   return
  // }

  // if (prop.analysisMethod.value == 'Chi-Square') {
  //   currentData.value = { ...M_Chi_Square.data, percentage: prop.data.percentage }
  // } else if (prop.analysisMethod.value == 'variance') {
  //   currentData.value = { ...M_Variance.data, percentage: prop.data.percentage }
  // } else if (prop.analysisMethod.value == 'frequency') {
  //   currentData.value = { ...M_Frequency.data, percentage: prop.data.percentage }
  // }
  console.log(currentData.value)
  // currentData.value = { ...jsondata.data, percentage: prop.data.percentage }
  currentData.value = prop.data
  // const mychat = echarts.init(document.getElementById('chart'))
  // mychat.setOption({
  //   title: {
  //     text: 'Stacked Line'
  //   },
  //   tooltip: {
  //     trigger: 'axis'
  //   },
  //   legend: {
  //     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  //   },
  //   grid: {
  //     left: '3%',
  //     right: '4%',
  //     bottom: '3%',
  //     containLabel: true
  //   },
  //   toolbox: {
  //     feature: {
  //       saveAsImage: {}
  //     }
  //   },
  //   xAxis: {
  //     type: 'category',
  //     boundaryGap: false,
  //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  //   },
  //   yAxis: {
  //     type: 'value'
  //   },
  //   series: [
  //     {
  //       name: 'Email',
  //       type: 'line',
  //       stack: 'Total',
  //       data: [120, 132, 101, 134, 90, 230, 210]
  //     },
  //     {
  //       name: 'Union Ads',
  //       type: 'line',
  //       stack: 'Total',
  //       data: [220, 182, 191, 234, 290, 330, 310]
  //     },
  //     {
  //       name: 'Video Ads',
  //       type: 'line',
  //       stack: 'Total',
  //       data: [150, 232, 201, 154, 190, 330, 410]
  //     },
  //     {
  //       name: 'Direct',
  //       type: 'line',
  //       stack: 'Total',
  //       data: [320, 332, 301, 334, 390, 330, 320]
  //     },
  //     {
  //       name: 'Search Engine',
  //       type: 'line',
  //       stack: 'Total',
  //       data: [820, 932, 901, 934, 1290, 1330, 1320]
  //     }
  //   ]
  // })
  // setTimeout(() => {
  //   const mhtml = {
  //     top:
  //       '<!DOCTYPE html>\n<html xmlns:o="urn:schemas-microsoft-com:office:office"\n' +
  //       '      xmlns:w="urn:schemas-microsoft-com:office:word"\n' +
  //       '      xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"\n' +
  //       '      xmlns="http://www.w3.org/TR/REC-html40">\n_html_</html>',
  //     head: '<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\n<style>\n_styles_\n</style>\n</head>\n',
  //     body: '<body>_body_</body>'
  //   }

  //   const exportReport = (styles, html, reportName) => {
  //     let fileContent = mhtml.top.replace(
  //       '_html_',
  //       mhtml.head.replace('_styles_', styles) + mhtml.body.replace('_body_', html)
  //     )
  //     let blob = new Blob([fileContent], { type: 'application/msword;charset=utf-8' })
  //     saveAs(blob, reportName + '.doc')
  //   }
  //   // 调用
  //   let styles = '' // 页面的样式 提取后:reportExportStyle.css
  //   let contentObj = document.getElementById('result') // 导出元素的id content
  //   exportReport(styles, contentObj.innerHTML, '导出的文件名xxx.doc')
  // }, 5000)
})
const handleExcel = () => {
  tableExport('excel')
}
const handleWord = () => {
  tableExport('doc')
}
const handlePdf = () => {
  printBtn.value.click()
}
const tableExport = async (type) => {
  var doc = ''
  doc += '<table>'
  var html = document.getElementById('score').innerHTML
  doc += html
  doc += '</table>'
  if (type == 'doc') {
    doc += document.getElementById('describe').innerHTML
    // await html2canvas(document.getElementById('chart')).then((canvas) => {
    //   console.log(canvas)
    //   const imgUrl = canvas.toDataURL('image/png')
    //   console.log(imgUrl)
    //   currentimgUrl.value = imgUrl
    //   doc += `<img src="${imgUrl}" width="800" height="300" />`
    // })
  }
  var a = document.body.innerHTML
  var docFile =
    "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:" +
    a +
    "' xmlns='http://www.w3.org/TR/REC-html40'>"
  docFile =
    docFile +
    '<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>' +
    doc +
    '</body></html>'
  console.log(docFile)
  var base64data = 'base64,' + window.btoa(unescape(encodeURIComponent(docFile)))
  if (type == 'doc') {
    window.open('data:application/msword;' + base64data)
  } else if (type == 'excel') {
    window.open('data:application/vnd.ms-excel;' + base64data)
  }
}
</script>

<style lang="scss" scoped>
.board {
  height: calc(100vh - 180px);
  padding: 10px 20px;
  overflow: auto;
  .name {
    padding: 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
  }
  .title {
    position: relative;
    padding: 20px;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    &::after {
      position: absolute;
      content: '';
      left: 0;
      top: 25px;
      height: 20px;
      width: 5px;
      background-color: #178aec;
    }
  }
}
.back {
  height: 32px;
  margin-left: 20px;
  cursor: pointer;
}
#chart {
  height: 300px;
  width: 100%;
}
#describe {
  margin: 20px 0 40px 0;
  box-shadow: 0 0 10px #ccc;
  padding: 10px;
  border-radius: 5px;
  padding-bottom: 20px;
}
</style>
